<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 节流函数：在指定时间内只执行一次，如果多次触发，只会执行一次
        // 应用场景：搜索框输入，鼠标移动，窗口大小改变
        function throttle(fn, delay) {
            let timer = null;
            return function () {
                var _this = this;
                var args = arguments;
                if (timer) {
                    return;
                }
                timer = setTimeout(function () {
                    fn.apply(_this, args); // 这里args接收的是外边返回的函数的参数，不能用arguments
                    // fn.apply(_this, arguments); 需要注意：Chrome 14 以及 Internet Explorer 9 仍然不接受类数组对象。如果传入类数组对象，它们会抛出异常。
                    timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
                }, delay)
            }
        }

        div1.addEventListener('drag', throttle((e) => {
            console.log(e.offsetX, e.offsetY)
        }, 100))

        function throttle(func, wait) {
            let inThrottle, lastFunc, lastRan;
            return function () {
                const context = this;
                const args = arguments;
                if (!inThrottle) {
                    func.apply(context, args);
                    lastRan = Date.now();
                    inThrottle = true;
                } else {
                    clearTimeout(lastFunc);
                    lastFunc = setTimeout(function () {
                        if ((Date.now() - lastRan) >= wait) {
                            func.apply(context, args);
                            lastRan = Date.now();
                        }
                    }, Math.max(wait - (Date.now() - lastRan), 0));
                }
            };
        }

        // 使用示例
        window.addEventListener('scroll', throttle(function () {
            console.log('页面已滚动');
        }, 1000));
    </script>
</body>

</html>